<template>
	<view>
		<view class="personal-image-box">
			<u-avatar style="position: absolute; z-index: 99; bottom: 10rpx; left: 10rpx;" :src="avatarUrl" mode="circle" size="large"></u-avatar>
			<view style="position: absolute; z-index: 99; bottom: 45rpx; left: 150rpx;">
				<u-tag mode="plain" type="primary" :text="nickname" @click="login()"></u-tag>
			</view>
			<image class="mineImageBox" src="../../static/logo.png" mode=""></image>
			<u-icon style="z-index: 100; font-size: 70rpx;height: 80rpx; position: absolute; bottom: 20rpx; right: 20rpx;" name="setting-fill"></u-icon>
		</view>

		<view style="margin-left: 80rpx;">
			<!-- margin-left: 80rpx; -->
			<u-row style="margin-top: 0rpx;margin-left: 50rpx;">
				<u-col :span="3">
					<view @click="gotoBrowseRecord()">
						<view class="browse-record">
							<u-icon class="iconfont icon-liulanjilu1"></u-icon>
						</view>
						<view style="margin-left: -20rpx;">
							<span>浏览记录</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="gotoRoomRecord()">
						<view class="browse-record">
							<u-icon class="iconfont icon-yuyue"></u-icon>
						</view>
						<view style="margin-left: -20rpx;">
							<span>我的收藏</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="gotoMyWallet()">
						<view class="browse-record">
							<u-icon class="iconfont icon-qianbao"></u-icon>
						</view>
						<view style="margin-left: -20rpx;">
							<span>我的钱包</span>
						</view>
					</view>
				</u-col>
				<u-col :span="3">
					<view @click="gotoMyCoupons()">
						<view class="browse-record">
							<u-icon class="iconfont icon-youhuiquan1"></u-icon>
						</view>
						<view style="margin-left: -30rpx;">
							<span>我的优惠券</span>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>

		<view style="margin-left: 80rpx;">
			<!-- margin-left: 80rpx; -->
			<u-row style="margin-top: 20rpx;margin-left: 50rpx;">
				<u-col :span="3">
					<view class="browse-record" @click="gotoRentPage">
						<u-icon class="iconfont icon-zufangyuechifangzixianxing"></u-icon>
					</view>
					<view style="margin-left: -20rpx;">
						<span>我要租房</span>
					</view>
				</u-col>
				<u-col :span="3">
					<view class="browse-record" @click="gotoSellPage">
						<u-icon class="iconfont icon-maifang2"></u-icon>
					</view>
					<view style="margin-left: -20rpx;">
						<span>我要买房</span>
					</view>
				</u-col>
				<u-col :span="3">
					<view class="browse-record" @click="gotoRentOutPage">
						<u-icon class="iconfont icon-maifang"></u-icon>
					</view>
					<view style="margin-left: -20rpx;">
						<span>我要出租</span>
					</view>
				</u-col>
				<u-col :span="3">
					<view class="browse-record" @click="gotoSailRoomPage">
						<u-icon class="iconfont icon-qianbao"></u-icon>
					</view>
					<view style="margin-left: -30rpx;">
						<span>我要卖房</span>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- <u-card :show-head="false" :show-foot="false" margin="20rpx">
			<view slot="body">
				<view>
					<u-row style="margin-top: 20rpx;">
						<u-col :span="6">
							<button class="service-bt" type="default" plain="false">合同服务</button>
						</u-col>
						<u-col :span="6">
							<button class="service-bt" type="default" plain="false">我要服务</button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-card>
		 -->
		<view>
			<u-cell-group>
				<u-cell-item icon="setting-fill" title="合同服务" @click="gotoFile()"></u-cell-item>
				<u-cell-item icon="kefu-ermai" title="我要服务" @click="gotoService()"></u-cell-item>
				<u-cell-item icon="order" title="我的预约" @click="gotoOrder()"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname: '未登录',
				avatarUrl: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
			}
		},
		onLoad() {
			this.getStaus()
			// getApp().watchUser(this.watchBack)
		},
		watch: {

		},
		methods: {
			//获取头像信息
			getStaus() {
				var that = this
				if (wx.getStorageSync("scope.userInfo") === 1) {
					//授权过后，获取本地缓存的信息
					wx.getStorage({
						key: 'user',
						success(res) {
							// console.log(res)
							that.avatarUrl = res.data.avatarUrl,
								that.nickname = res.data.nickName
						}
					})
				} else {
					that.nickname = '未登录'
					that.avatarUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
				}
			},
			// watchBack: function(value) { //这里的value 就是 app.js 中 watch 方法中的 set, 返回整个 globalData
			// 	this.getStaus()
			// },
			async login() {
				var that = this
				//退出登录
				if (wx.getStorageSync("scope.userInfo") === 1) {
					getApp().userId = 0
					wx.removeStorage({
						key: 'user',
						success: (res) => {
							wx.setStorageSync('scope.userInfo', 0)
							that.nickname = '未登录'
							that.avatarUrl = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg'
						}
					})
				} else {
					that.getUserInfo() 
				}

			},
			//微信授权
			getUserInfo(){
				var that = this
				wx.getUserProfile({
					desc: '获得你的昵称、头像、地区及性别',
					success: (res) => {
						// console.log(res)
						wx.setStorageSync("scope.userInfo",1)//标记授权状态
						wx.setStorage({
							key: "user",
							data: res.userInfo,
							success() {
								// that.logRequset(res.userInfo)
								that.getStaus()
							},
							fail(){
								
							}
						})
					},
					fail: (res) => {
						console.log(res)
						wx.showToast({
							title: '您拒绝了授权',
							icon: 'none',
							duration: 2000
						})
						// that.logRequset(null)
						// wx.navigateBack({
						// 	delta: 1
						// })
					}
				})
			},
			gotoRoomRecord() {
				wx.navigateTo({
					url: '/pages/components/roomRecord',
					fail: function() {
						console.log("跳转失败")
					}
				})
			},
			gotoBrowseRecord() {
				console.log("点击了")
				wx.navigateTo({
					url: '/pages/components/browseRecord',
					fail: function() {
						console.log("跳转失败")
					}
				})
			},
			gotoService() {
				wx.navigateTo({
					url: '/pages/components/myService'
				})
			},
			gotoOrder() {
				// console.log("点击了")
				wx.navigateTo({
					url: '/pages/components/orderList'
				})
			},
			gotoRentPage() {
				wx.switchTab({
					url: '/pages/rentPage/rentPage'
				})
			},
			gotoSellPage() {
				wx.switchTab({
					url: '/pages/sellPage/sellPage'
				})
			},
			gotoRentOutPage() {
				wx.navigateTo({
					url: '/pages/components/rentOut'
				})
			},
			gotoSailRoomPage() {
				wx.navigateTo({
					url: '/pages/components/sailRoom'
				})
			},
			//我的钱包 --------暂未开放
			gotoMyWallet() {
				wx.showToast({
					title: '功能暂未开放',
					icon: 'none',
					duration: 1000
				})
			},
			//我的优惠券 --------暂未开放
			gotoMyCoupons() {
				wx.showToast({
					title: '功能暂未开放',
					icon: 'none',
					duration: 1000
				})
			},
			//合同文件下载
			gotoFile() {
				wx.navigateTo({
					url: '../components/contractFile'
				})
			}
		}
	}
</script>

<style>
	.personal-image-box {
		position: relative;
		height: 380rpx;
		width: 100%;
	}

	.mineImageBox {
		height: 380rpx;
		width: 100%;
		position: absolute;
		z-index: 1;
	}

	.service-bt {
		width: 250rpx;
		/* margin-left: 50rpx; */
	}

	.browse-record {
		height: 80rpx;
		font-size: 70rpx;
	}

	.iconfont {
		font-size: 60rpx !important;
	}
</style>
